<template>
  <div id="app">
    <!-- 侧边栏 mode="out-in"-->
    <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
      <sidebar v-if="$store.state.opensideBar"></sidebar>
    </transition>
    <!-- 页面 -->
    <transition
      mode="out-in"
      enter-active-class="animated flipInY"
      leave-active-class="animated flipOutY"
    >
      <router-view></router-view>
    </transition>

    <!-- 音乐播放器 -->
    <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
      <zeroPlayer v-if="$store.state.openplayer"></zeroPlayer>
    </transition>
    <!-- 迷你音乐播放器 -->
    <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown">
      <zeroMiniPlayer v-if="$store.state.curindex!=-1 && $store.state.openplayer==false"></zeroMiniPlayer>
    </transition>
    <!-- 播放列表 -->
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <!-- //换肤 -->
      <!-- <zeroQueue :style="{ 'z-index': $store.state.openplayList ? 100 : -100 }"></zeroQueue> -->
      <zeroQueue v-if="$store.state.openplayList"></zeroQueue>
    </transition>
  </div>
</template>

<script>
// 侧边栏
import sidebar from "@/components/Sidebar.vue";
// 音乐播放器
import zeroPlayer from "@/components/ZeroPlayer.vue";
// 迷你音乐播放器
import zeroMiniPlayer from "@/components/ZeroMiniPlayer.vue";
// 播放列表
import zeroQueue from "@/components/ZeroQueue.vue";
export default {
  name: "app",
  components: {
    sidebar,
    zeroPlayer,
    zeroMiniPlayer,
    zeroQueue
  }
};
</script>

<style lang="scss">
$zerocolor: #d43c33;
$fontcolor: #333;
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: $fontcolor;
  background-color: #fff;
}
#nav {
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  position: absolute;
  bottom: 0;
  width: 100%;
  a {
    font-weight: bold;
    color: $fontcolor;
    width: 20%;
    box-sizing: border-box;
    transition: all 0.5s;
    &.router-link-exact-active {
      color: $zerocolor;
      border-bottom: 2px solid $zerocolor;
    }
  }
}
</style>
